const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.join(__dirname, './dist'),
        filename: 'main.js'
    },
    plugins: [new HtmlWebpackPlugin({
        template: './public/index.html'
    }), new MiniCssExtractPlugin({
        filename: "css/common.css"
    }),],
    module: {
        rules: [
            {
                test: /\.css$/i,
                use : [
                    MiniCssExtractPlugin.loader,
                    { loader: "css-loader" }
                ]
            },
            {
                test: /\.less$/i,
                use: [
                    MiniCssExtractPlugin.loader,
                    { loader: "css-loader" },
                    { loader: "less-loader" }
                ],
            },
            {
                test: /\.(png|jpg|gif|jpeg)$/i,
                // asset: 大于 8KB 不转 base64 直接复制, 小于 8KB 转成 base64 插入到 js 中
                type: 'asset',
                // generator 就是定义打包输出的规则
                generator: {
                    // [] 的内容当做内置的变量
                    // [name] 表示原先的文件名
                    // [hash:6] 表示使用哈希字符串, 长度6
                    // [ext] 表示后缀名 带 .
                    filename: 'imgs/[name].[hash:4][ext]'
                }
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/i,
                // asset/resource: 不做 base64 转换, 无论多大多小都直接复制到出口
                type: 'asset/resource',
                generator: {
                    // [] 的内容当做内置的变量
                    // [name] 表示原先的文件名
                    // [hash:6] 表示使用哈希字符串, 长度6
                    // [ext] 表示后缀名 带 .
                    filename: 'fonts/[name].[hash:4][ext]'
                }
            },
            { // 强烈不建议大家手写, 容易出错
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
            
        ],
    },
    devServer: {
        port: 3000, // 端口号
        open: true // 自动打开浏览器
    }
}